import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_vant/component/icon.dart';
import 'package:flutter_vant/component/loading.dart';
import 'package:flutter_vant/component/toast.dart';
import 'package:rlstyles/main.dart';
import 'package:flutter_vant/command/overLay.dart' as command;

class VanToastView extends HookWidget {
  final VanToastOption? option;
  final bool? showing;
  final int? duration;
  const VanToastView({this.option, this.showing = true, this.duration = 2000});
  @override
  Widget build(BuildContext context) {
    IconData getIconName() {
      switch (option?.type) {
        case VanToastType.success:
          return Icons.done;
        case VanToastType.fail:
          return Icons.error_outline;
        default:
          return Icons.done;
      }
    }

    getIcon() {
      if (option?.icon != null) {
        return VanIcon(
            name: option?.icon,
            color: 'white',
            size: 24,
            styles: {CssRule.marginBottom: 5});
      } else if (option?.type != null) {
        return VanIcon(
            name: getIconName(),
            color: 'white',
            size: 24,
            styles: {CssRule.marginBottom: 5});
      } else {
        return Container();
      }
    }

    getStyles() {
      return {
        'main': {
          CssRule.width: double.infinity,
          CssRule.height: double.infinity,
          CssRule.backgroundColor:
              option?.overlay == true ? 'rgba(0, 0, 0, 0.7)' : '',
          ...(option?.styles ?? {}),
        },
        'toast': {
          CssRule.width: 120,
          CssRule.backgroundColor: 'rgba(0, 0, 0, 0.7)',
          CssRule.borderRadius: 5,
          CssRule.justifyContent: 'center',
          CssRule.alignItems: 'center',
          CssRule.fontSize: 12,
          CssRule.paddingTop: 15,
          CssRule.paddingBottom: 15,
        },
        'content': {
          CssRule.justifyContent: 'center',
          CssRule.alignItems: 'center',
          CssRule.color: 'white',
        },
        'middle': {
          CssRule.justifyContent: 'center',
          CssRule.alignItems: 'center'
        },
        'top': {CssRule.alignItems: 'center', CssRule.paddingTop: 50},
        'bottom': {
          CssRule.justifyContent: 'flex-end',
          CssRule.alignItems: 'center',
          CssRule.paddingBottom: 50
        }
      };
    }

    renderLoading() {
      return VanLoading(size: 20, text: option?.message, vertical: true);
    }

    renderContent() {
      return Frame(
        styles: getStyles()['content'],
        children: [getIcon(), TextView(option?.message ?? '内容')],
      );
    }

    renderToast() {
      return Frame(
        styles: getStyles()['toast'],
        children: [
          option?.type == VanToastType.loading
              ? renderLoading()
              : renderContent(),
        ],
      );
    }

    getPositionName() {
      return ['top', 'middle', 'bottom'][option?.position.index ?? 1];
    }

    Widget renderOverlay() {
      final css = {'main': true, getPositionName(): true};
      final cls = StylesMap.getClass(css, getStyles());
      return Frame(styles: cls, children: [
        AnimatedOpacity(
            opacity: showing == true ? 1.0 : 0.0,
            duration: showing == true
                ? Duration(milliseconds: 100)
                : Duration(milliseconds: 400),
            child: renderToast())
      ]);
    }

    useEffect(() {
      Timer t = Timer(Duration(milliseconds: duration ?? 2000), () {
        command.remove();
      });
      return () {
        t.cancel();
      };
    }, []);
    return renderOverlay();
  }
}
